<template>
  <div class="positionManage-form">
    <MainHead :refresh="false"
              :title="pageTitle" />
    <el-card class="main-card"
             style="margin-top: 10px"
             shadow="never"
             v-loading="$store.state.loading">
      <el-form ref="form"
               :model="form"
               label-width="auto"
               :rules="rules"
               :disabled="type === 3">
        <el-row type="flex"
                justify="space-between">
          <el-col :span="7">
            <el-form-item label="农村名称："
                          prop="fkRuralId">
              <el-select v-model="form.fkRuralId"
                         placeholder="请选择农村名称"
                         filterable
                         clearable
                         style="width: 100%">
                <el-option v-for="item in deptList"
                           :key="item.id"
                           :label="item.deptName"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="村标签："
                          prop="tagIdList">
              <el-select v-model="form.tagIdList"
                         placeholder="请选择村标签"
                         filterable
                         clearable
                         multiple
                         style="width: 100%">
                <el-option v-for="item in DictionaryList"
                           :key="item.id"
                           :label="item.itemName"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="总人口数："
                          prop="populationNumber">
              <el-input v-model.number="form.populationNumber"
                        placeholder="请输入总人口数量"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="党员人数："
                          prop="partyMemberNumber">
              <el-input v-model.number="form.partyMemberNumber"
                        placeholder="请输入党员人数"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="网格数："
                          prop="gridNumber">
              <el-input v-model.number="form.gridNumber"
                        placeholder="请输入网格数"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="微网格数："
                          prop="microGridNumber">
              <el-input v-model.number="form.microGridNumber"
                        placeholder="请输入微网格数"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="党群服务中心图片："
                          prop="centerPhoto">
              <Upload v-model="form.centerPhoto"
                      :tip="tip"
                      :fileSize="fileSize"
                      :format="format"
                      :limit='10'
                      @change="publicSuccess($event, 'centerPhoto')" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="党组织书记姓名："
                          prop="secretaryName">
              <el-input v-model="form.secretaryName"
                        placeholder="请输入党组织书记姓名"></el-input>
            </el-form-item>
            <el-form-item label="班子数："
                          prop="committeeManNumber">
              <el-input v-model.number="form.committeeManNumber"
                        placeholder="请输入班子数"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="后备数："
                          prop="committeeWomanNumber">
              <el-input v-model.number="form.committeeWomanNumber"
                        placeholder="请输入后备数"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="总户数："
                          prop="householdsNumber">
              <el-input v-model.number="form.householdsNumber"
                        placeholder="请输入总户数："
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="流动人口数："
                          prop="floatingPopulationNumber">
              <el-input v-model.number="form.floatingPopulationNumber"
                        placeholder="请输入流动人口数量"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="党员活动平均参与率："
                          prop="partyActivitiesRatio">
              <el-input v-model.number="form.partyActivitiesRatio"
                        placeholder="党员活动平均参与率"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="集体照：">
              <Upload v-model="form.groupPhoto"
                      :tip="tip"
                      :fileSize="fileSize"
                      :format="format"
                      :limit='10'
                      @change="publicSuccess($event, 'groupPhoto')" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="荣誉分："
                          prop="honorPoints">
              <el-input v-model.number="form.honorPoints"
                        placeholder="请输入荣誉分"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="党组织书记荣誉：">
              <el-input v-model="form.secretaryHonor"
                        placeholder="请输入党组织书记荣誉"></el-input>
            </el-form-item>
            <!-- <el-form-item label="两委女班子数："
                          prop="committeeWomanNumber">
              <el-input v-model.number="form.committeeWomanNumber"
                        placeholder="请输入两委女班子数量"></el-input>
            </el-form-item> -->
            <el-form-item label="党组织书记标签：">
              <el-input v-model="form.secretaryTag"
                        placeholder="请输入党组织书记标签"></el-input>
            </el-form-item>
            <el-form-item label="常住人口数：">
              <el-input v-model.number="form.residentsPopulationNumber"
                        placeholder="请输入常住人口数量"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="户籍人口数：">
              <el-input v-model.number="form.registeredPopulationNumber"
                        placeholder="请输入户籍人口数量"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="党组织书记照片："
                          prop="secretaryPhoto">
              <Upload v-model="form.secretaryPhoto"
                      :tip="tip"
                      :fileSize="fileSize"
                      :format="format"
                      :limit='10'
                      @change="publicSuccess($event, 'secretaryPhoto')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
        </el-form-item>
      </el-form>
      <div class="footer-btn">
        <el-button style="color: #d03539; border-color: #d03539; padding: 12px 27px"
                   @click="$router.push(homePage)">取消</el-button>
        <el-button v-if="type !== 3"
                   style="padding: 12px 27px"
                   type="primary"
                   @click="submit(type)">保存</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { deepCopy } from "@/utils/deepCopy";
import store from "@/store";
export default {
  data () {
    const checkNumber = (rule, value, callback) => {
      if (value === null || !(typeof value === 'number')) {
        callback(new Error('请输入数字值'))
      } else {
        callback()
      }
    }
    // const checkArr = (rule, value, callback) => {
    //   console.log(value)
    //   if (!value || value.length === 0) {
    //     callback(new Error('请填写村标签'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      tag: '',
      suffix: '农村详情',
      tip: '请上传jpg,jpeg,png格式图片，单张图片大小不能超过1M',
      fileSize: 1,
      // width: 1920,
      // height: 1080,
      // width: 596,
      // height: 320,
      format: ['jpg', 'jpeg', 'png', 'JPG'],
      homePage: '/ruralInfo',
      action: {
        curd: '/ruralInfo/',
        getDept: '/accountDept/listSelectDeptNames',
        getDictionary: '/systemDictionary/mapRoleCodeListDictionaryInRootCode'
      },
      form: {
        rfRuralName: '', // 农村名称
        centerPhoto: '', // 服务中心图片
        secretaryName: '', // 党组织书记姓名
        secretaryPhoto: '', // 党组织书记照片
        committeeManNumber: null, // 两委男班子数
        committeeWomanNumber: null, // 两委女班子数
        // committeeNumber: null,
        populationNumber: null, // 总人口数
        householdsNumber: null, // 户数
        residentsPopulationNumber: null, // 常住人口数
        floatingPopulationNumber: null, // 流动人口数
        registeredPopulationNumber: null, // 户籍人口数
        partyMemberNumber: null, // 党员人数
        secretaryHonor: '', // 荣誉
        groupPhoto: '',
        gridNumber: null, // 集体照
        microGridNumber: null,
        partyActivitiesRatio: null,
        honorPoints: null,
        tagIdList: [],
        fkRuralId: ''
      },
      rules: {
        fkRuralId: [{ required: true, message: '请输入农村名称', trigger: 'change' }],
        secretaryName: [{ required: true, message: '请输入党组织书记姓名', trigger: 'blur' }],
        secretaryTag: [{ required: true, message: '请输入党组织书记标签', trigger: 'blur' }],
        secretaryHonor: [{ required: true, message: '请输入党组织书记荣誉', trigger: 'blur' }],
        populationNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        tagIdList: [{ type: 'array', required: true, message: '请至少选择一个村标签', trigger: 'blur' }],
        registeredPopulationNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        committeeManNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        householdsNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        floatingPopulationNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        committeeWomanNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        residentsPopulationNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        committeeNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        partyMemberNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        gridNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        microGridNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        partyActivitiesRatio: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        honorPoints: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        centerPhoto: [{ required: true, message: '请上传党群服务中心图片', trigger: 'change' }],
        secretaryPhoto: [{ required: true, message: '请上传党组织书记照片', trigger: 'change' }],
        groupPhoto: [{ required: true, message: '请上传集体照片', trigger: 'change' }]
      },
      deptList: [],
      DictionaryList: []
    }
  },
  components: {

  },
  computed: {
    pageTitle () {
      const titlelist = ['', '新增', '修改', '查看']
      return titlelist[this.$route.meta.type] + this.suffix
    },
    type () {
      return this.$route.meta.type
    }
  },
  created () {
    if (this.$route.meta.type !== 1) {
      this.getPageList()
    }
    this.getDictionaryList('ruralTag', 'DictionaryList')
    this.getDeptInfo()
    this.form.fkRuralId = store.state.userInfo.deptList[0].id
  },
  methods: {
    getDictionaryList (rootCodes, listName) {
      this.$Ajax(
        this.action.getDictionary,
        'get',
        {
          rootCodes
        },
        (res) => {
          this[listName] = res.data[rootCodes] || res.data
        }
      )
    },
    // 获取详情数据
    getPageList () {
      this.$Ajax(
        this.action.curd + localStorage.getItem('id'),
        "get",
        {
        },
        (res) => {
          // console.log(res.data.groupPhoto.split(','))
          const data = deepCopy(res.data)
          // data.groupPhoto = data.groupPhoto ? {
          //   url: process.env.VUE_APP_BASE_URL + process.env.VUE_APP_FILE_URL + data.groupPhoto,
          //   name: data.groupPhoto,
          //   data: data.groupPhoto
          // } : ''
          data.groupPhoto = data.groupPhoto && data.groupPhoto !== '' ? data.groupPhoto.split(',').map(item => {
            return {
              url: item,
              name: item
            }
          }) : ''
          // data.secretaryPhoto = data.secretaryPhoto ? {
          //   url: process.env.VUE_APP_BASE_URL + process.env.VUE_APP_FILE_URL + data.secretaryPhoto,
          //   name: data.secretaryPhoto,
          //   data: data.secretaryPhoto
          // } : ''
          // data.centerPhoto = data.centerPhoto ? {
          //   url: process.env.VUE_APP_BASE_URL + process.env.VUE_APP_FILE_URL + data.centerPhoto,
          //   name: data.centerPhoto,
          //   data: data.centerPhoto
          // } : ''
          data.secretaryPhoto = data.secretaryPhoto && data.secretaryPhoto !== '' ? data.secretaryPhoto.split(',').map(item => {
            return {
              url: item,
              name: item.secretaryPhoto
            }
          }) : ''
          data.centerPhoto = data.centerPhoto && data.centerPhoto !== '' ? data.centerPhoto.split(',').map(item => {
            return {
              url: item,
              name: item,
            }
          }) : ''
          data.tagIdList = data.tagList.map(item => {
            return item.id
          })
          this.form = deepCopy(data)
        }
      );
    },
    // 获取部门下拉框信息
    getDeptInfo () {
      this.$Ajax(
        this.action.getDept + '?deptType=' + '农村',
        'get',
        {
        },
        (res) => {
          this.deptList = res.data
        }
      )
    },
    publicSuccess () {
      // console.log(file, key)
    },
    // 提交
    submit (type) {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        const data = deepCopy(this.form)
        console.log(data)
        const key = ['groupPhoto', 'secretaryPhoto', 'centerPhoto']
        key.forEach(item => {
          if (Object.prototype.toString.call(data[item]) === '[object Object]') {
            if (data[item].response) {
              data[item] = data[item] ? data[item].response.data.uploadPath : ''
            } else {
              data[item] = data[item].data
            }
          } else if (Object.prototype.toString.call(data[item]) === '[object Array]') {
            data[item] = (data[item] && data[item].length !== 0) ? data[item].map(item => item.url).join(',') : ''
          } else {
            data[item] = data[item] ? data[item].data ? data[item].data : '' : ''
          }
        })
        this.$Ajax(
          this.action.curd,
          type === 1 ? 'post' : 'put',
          {
            ...data
          },
          (res) => {
            this.$message.success(res.message);
            this.$router.push(this.homePage)
          }
        )
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-input__inner {
  padding-right: 0px;
}
.positionManage-form {
  .title {
    display: flex;
    align-items: center;
    margin-top: 20px;
    h2 {
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1c1d1d;
      margin: 0;
      line-height: 40px;
    }
  }
  .footer-btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
